import React from 'react';
import { Divider, List, Avatar, Button } from 'antd';
import styles from './Pane.less';
import UserListPane from './UserListPane';
import PropTypes from 'prop-types';
import moment from 'moment';
import classNames from 'classnames';
import lodash from 'lodash';

class UserSelectTransfer extends React.Component {
  static propTypes = {
    title: PropTypes.string,
    folderLength: PropTypes.number.isRequired,
    selectedRows: PropTypes.array.isRequired,
    allRows: PropTypes.array.isRequired,
    hasMore: PropTypes.bool.isRequired,
    onLoadRightList: PropTypes.func.isRequired,
    onLoadLeftList: PropTypes.func,
    onAdd: PropTypes.func,
    onRemove: PropTypes.func,
  }

  state = {
    rightSelectedItems: [],
    leftSelectedItems: [],
  }

  _handleAdd = () => {
    const { onAdd } = this.props;
    const params = { ...this.state.rightSelectedItems };
    onAdd(params);
    this.setState({
      rightSelectedItems: [],
      leftSelectedItems: [],
    });
  }

  _handleRemove = () => {
    const { onRemove } = this.props;
    const params = { ...this.state.leftSelectedItems };
    onRemove(params);
    this.setState({
      rightSelectedItems: [],
      leftSelectedItems: [],
    });
  }

  _handleLeftItemChick = (id) => {
    const { leftSelectedItems } = this.state;
    if (!leftSelectedItems.includes(id)) {
      leftSelectedItems.push(id);
    } else {
      const newItems = leftSelectedItems.filter(_ => _ !== id);
      this.setState({
        leftSelectedItems: newItems,
      });
      return null;
    }

    this.setState({
      rightSelectedItems: [],
      leftSelectedItems,
    });
    return null;
  }

  _handleRightItemClick = (id) => {
    
    const { rightSelectedItems } = this.state;
    if (!rightSelectedItems.includes(id)) {
      rightSelectedItems.push(id);
    } else {
      const newItems = rightSelectedItems.filter(_ => _ !== id);
      this.setState({
        rightSelectedItems: newItems,
      });
      return null;
    }

    this.setState({
      leftSelectedItems: [],
      rightSelectedItems,
    });
    return null;
  }

  _isLeftBtnDisable = () => {
    return this.state.rightSelectedItems.length <= 0 && this.props.folderLength > 0;
    // let arr = this._computeUnSelectedRows();
    // return (arr || []).length <= 0;
  }

  _isRightBtnDisable = () => {
    // let arr = this.state.selectedRows;
    // return (arr || []).length <= 0;
    return this.state.leftSelectedItems.length <= 0 && this.props.folderLength > 0;
  }

  _computeUnSelectedRows = () => {
    const { allRows, selectedRows } = this.props;

    return lodash.differenceBy(allRows, selectedRows, 'ID');
  }

  render () {
    const { selectedRows, hasMore, onLoadRightList, title } = this.props;
    return (
      <div className={styles.usTransfer}>
        <div className={styles.card}>
          <div className={styles.header}>
            <h3 className={styles.title}>{title}</h3>
            <a href="#" className={styles.btn}>编辑</a>
          </div>
          <div className={styles.content}>
            <div className={styles.infiniteContainer}>
              <UserListPane
                dataSource={selectedRows}
                loading={false}
                onLoad={() => {}}
                hasMore
                renderListItem={(item) => {
                  const { birthday, gender } = item.Profile;
                  let age;
                  if (birthday) {
                    age = Number(moment().format('YYYY')) - Number(moment(+birthday).format('YYYY')) || 0;
                  }
                  let _genders = {
                    male: '男',
                    female: '女',
                  };
                  const isSelected = this.state.leftSelectedItems.includes(item.ID);
                  return (<List.Item className={classNames(styles.listItem, { [styles.selected]: isSelected })} onClick={() => this._handleLeftItemChick(item.ID)}>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large" />}
                      title={<a>{`${item.Profile.FirstName} ${item.Profile.LastName}`} {age ? `${age} 岁` : ''} {_genders[gender] || ''}</a>}
                      description={item.Mobile}
                    />
                  </List.Item>);
                }}
              />
            </div>
          </div>
        </div>
        <Divider type="vertical" dashed={false} className={styles.divider} />
        <div className={styles.bottons}>
          <Button icon="left" disabled={this._isLeftBtnDisable()} onClick={this._handleAdd} />
          <Button icon="right" disabled={this._isRightBtnDisable()} onClick={this._handleRemove} />
        </div>
        <Divider type="vertical" dashed={false} className={styles.divider} />
        <div className={styles.card}>
          <div className={styles.header}>
            <h3 className={styles.title}>未选团员</h3>
          </div>
          <div className={styles.content}>
            <div className={styles.infiniteContainer}>
              <UserListPane
                dataSource={this._computeUnSelectedRows()}
                loading={false}
                pageStart={1}
                onLoad={onLoadRightList}
                hasMore={hasMore}
                renderListItem={(item) => {
                  const { birthday, gender } = item.Profile;
                  let age;
                  if (birthday) {
                    age = Number(moment().format('YYYY')) - Number(moment(+birthday).format('YYYY')) || 0;
                  }
                  let _genders = {
                    male: '男',
                    female: '女',
                  };
                  const isSelected = this.state.rightSelectedItems.includes(item.ID);
                  return (<List.Item className={classNames(styles.listItem, { [styles.selected]: isSelected })} onClick={() => this._handleRightItemClick(item.ID)}>
                    <List.Item.Meta
                      avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" size="large" />}
                      title={<a>{`${item.Profile.FirstName} ${item.Profile.LastName}`} {age ? `${age} 岁` : ''} {_genders[gender] || ''}</a>}
                      description={item.Mobile}
                    />
                  </List.Item>);
                }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default UserSelectTransfer;
